<template>
  <div class="wrapper">
    <header>
      <Navbar title="护肤榜" />
      <div class="navcase">
        <div class="nav">
          <van-tabs
            swipe-threshold="3"
            line-height="0px"
            title-active-color="#78cccd"
          >
            <van-tab v-for="value in pronav" :title="value" :key="value">
            </van-tab>
          </van-tabs>
        </div>
        <div class="fix"></div>
        <div class="fixbox"><van-icon name="apps-o" size="20" /></div>
      </div>
      <div class="option">
        <van-tabs
          swipe-threshold="4"
          line-height="0px"
          title-active-color="#78cccd"
        >
          <van-tab v-for="value in optionlist" :title="value" :key="value">
          </van-tab>
        </van-tabs>
      </div>
    </header>
    <div class="content">
      <div
        class="proitem"
        v-for="prolist in Productlist"
        :key="prolist.pro_idç"
      >
        <Pro :item="prolist" />
      </div>
    </div>
  </div>
</template>
<script>
import { Tabs, Tab, Icon } from "vant";
import Navbar from "../../Navbar.vue";
import Pro from "./product/Pro.vue";
import { mapActions, mapState } from "vuex";
export default {
  components: { Navbar, VanTabs: Tabs, VanTab: Tab, VanIcon: Icon, Pro },
  data() {
    return {
      pronav: ["上升榜", "洁面", "护肤水", "精华", "乳液"],
      optionlist: ["综合", "热度", "评分", "价格"],
    };
  },
  computed: {
    ...mapState(["Productlist"]),
  },
  mounted() {
    this.GetProductlistasync();
  },
  methods: {
    ...mapActions(["GetProductlistasync"]),
  },
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/var.less";
header {
  height: 134px;
  width: 100%;
  background: #fff;
  .navcase {
    background: #fff;
    position: fixed;
    top: 46px;
    display: flex;
    height: 42px;
    align-items: center;
    border-bottom: 1px solid #000;
    .nav {
      /deep/ .van-tabs__nav {
        .van-tab {
          padding: 0 18px;
        }
      }
    }
    .fix {
      width: 56px;
      height: 44px;
      background: #fff;
    }
    .fixbox {
      position: fixed;
      right: 0;
      width: 50px;
      height: 20px;
      display: flex;
      border-left: 1px solid #ccc;
      i {
        margin: auto;
      }
    }
  }
  .option {
    position: fixed;
    top: 90px;
    margin-left: 10px;
    /deep/ .van-tabs__nav {
      .van-tab {
        padding: 0 15px;
      }
    }
  }
}
.content {
  .content();
  top: 134px;
}
</style>
